<!--
 * @Author: hifishroom
 * @Date: 2021-08-25 16:13:27
 * @LastEditTime: 2021-08-25 19:07:55
 * @FilePath: \repose\src\views\background\CollapseNav.vue
-->
<template>
  <div class="nav-bar">
    <div class="iconfont nav-item">
      <div>
        <em class="nav-icon">&#xe620;</em
        ><span class="nav-title">系统首页</span>
      </div>
    </div>
    <div class="iconfont nav-item flex">
      <div>
        <em class="nav-icon">&#xe607;</em
        ><span class="nav-title">账户管理</span>
      </div>
      <div><i class="nav-drop">&#xe60d;</i></div>
    </div>
    <div class="nav-sofi" :class="{ height: flag }">
      <div class="iconfont nav-item-t">
        <div class="flex flex-jus" @click="sofiClick">
          <div>
            <em class="nav-icon">&#xe67a;</em
            ><span class="nav-title">坐标信息管理</span>
          </div>
          <i class="nav-drop" :class="{ iconRotate: flag }">&#xe60d;</i>
        </div>
        <div class="items">
          <div class="nav-item"><div class="item-title">基础信息</div></div>
          <div class="nav-item"><div class="item-title">类型信息</div></div>
          <div class="nav-item"><div class="item-title">楼栋信息</div></div>
          <div class="nav-item"><div class="item-title">设备信息</div></div>
          <div class="nav-item"><div class="item-title">遗留问题信息</div></div>
          <div class="nav-item"><div class="item-title">电梯信息</div></div>
          <div class="nav-item"><div class="item-title">工程信息</div></div>
        </div>
      </div>
    </div>
    <div class="iconfont nav-item flex">
      <div>
        <em class="nav-icon">&#xe60f;</em><span class="nav-title">字典</span>
      </div>
      <div><i class="nav-drop">&#xe60d;</i></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CollapseNav",
  data() {
    return {
      flag: false
    };
  },
  methods: {
    sofiClick() {
      this.flag = !this.flag;
    }
  },
  mounted() {}
};
</script>

<style lang="scss">
.nav-bar {
  margin-top: 20px;
  width: 12%;
  min-width: 150px;
  color: #383333;
  line-height: 3;

  background-color: azure;
}

.nav-item {
  justify-content: space-between;
  height: 49px;
  &:hover {
    color: #409eff;
  }
}
.nav-item-t {
  justify-content: space-between;
  height: 49px;
}

.nav-sofi {
  height: 49px;
  overflow: hidden;
  transition: all 0.3s;
}

.height {
  height: 400px;
  overflow: auto;
  overflow-y: hidden;
  .items {
    background-color: aliceblue;
  }
}

.nav-icon {
  margin: 0 8px;
}

.flex-jus {
  justify-content: space-between;
  &:hover {
    color: #409eff;
  }
}

.nav-drop {
  margin-right: 10px;
  transition: all 0.3s;
}

.item-title {
  padding-left: 32px;
  &:hover {
    color: #409eff;
  }
}

.iconRotate {
  transform: rotate(180deg);
}

.nav-title-c {
  color: #409eff;
}
</style>
